<script setup>
import { OpenChildrenPage, routeQuery } from "@/hook/routerHandle.js";
import { onBeforeMount, ref } from "vue";
import { selectShopLiveByRoomId } from "@/server/api/Room_type_interface.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const query = routeQuery();
console.log("query$$:", query);
let liveDays = query.outData[2] - query.inData[2];
const roomIdMessage = ref([]);
const typeName = ["appliance", "basics", "bath"];

const selectShopLiveByRoomIdFun = async (r) => {
  let { data } = await selectShopLiveByRoomId(r);
  roomIdMessage.value = data.data;
  console.log(roomIdMessage.value);
  return {
    roomIdMessage,
  };
};

const toHotelOrder = () => {
  // router.push({
  //   path: "/hotelOrder",
  //   query: {
  //     price: roomIdMessage.price * query.interval,
  //     bedType: roomIdMessage.bedType
  //   }
  // });
  OpenChildrenPage('/hotelOrder', {
    price: roomIdMessage.value.price,
    bedType: roomIdMessage.value.bedType,
    inData: query.inData,
    outData: query.outData,
    liveDays: liveDays,
    title: query.title,
    shopId: query.shopId,
    roomId: query.roomId
  })
};

onBeforeMount(() => {
  const url = window.location.pathname;
  // 使用 split() 方法将路径分割为数组
  const segments = url.split("/");
  // 使用 pop() 方法获取数组中的最后一个元素
  const roomId = segments.pop();

  console.log(roomId); // 输出 URL 中最后一个斜杠后面的值
  selectShopLiveByRoomIdFun(query.roomId);
});
</script>
<!-- 没实现，待定 -->
<template>
  <div class="hotelDetail">
    <img src="/images/Shop/backBtn1.png" alt="" class="backBtn" @click="$router.back()" />

    <div class="swiper">
      <van-swipe class="my-swiper" :show-indicators="false">
        <van-swipe-item v-for="(item, i) in 20" :key="i">
          <img src="/images/Shop/hotelDetailImg.png" alt="" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>

    <div class="details">
      <div class="title">{{ roomIdMessage.roomTypeName }}</div>

      <ul class="room_message">
        <li class="room_message_li">
          <span class="room_message_type_text">{{ roomIdMessage.land }}m²</span><span
            class="room_message_type">空间</span>
        </li>
        <li class="room_message_li">
          <span class="room_message_type_text">禁止吸烟</span>
          <span class="room_message_type">吸烟</span>
        </li>
        <li class="room_message_li">
          <span class="room_message_type_text">{{ roomIdMessage.floor }}层</span><span
            class="room_message_type">楼层</span>
        </li>
        <li class="room_message_li">
          <span class="room_message_type_text">{{ roomIdMessage.bedType }}</span><span
            class="room_message_type">房型</span>
        </li>
      </ul>

      <div class="facilities">
        <div class="title">
          <div class="left">配套设施</div>

          <div class="right">
            <div class="text">全部设施</div>
            <div class="btn"></div>
          </div>
        </div>

        <div class="content">
          <div class="item" v-for="(i, index) in typeName" :key="index">
            <div class="title">{{ i }}</div>
            <div class="ul">
              <div class="li" v-for="(j, index) in roomIdMessage[i]" :key="index">
                <img src="/images/Shop/has.png" alt="" v-show="j.flag === true" />
                <img src="/images/Shop/hasn.png" alt="" v-show="j.flag === false" />
                <div class="text">{{ j.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tips">
        <div class="item">
          <img src="/images/Shop/HotelLogo.png" alt="" />

          <div class="text">
            <span>整体出租 {{ roomIdMessage.land }}㎡</span>
            <span>{{ roomIdMessage.room }}室{{ roomIdMessage.restRoom }}卫</span>
          </div>
        </div>

        <div class="item">
          <img src="/images/Shop/bed.png" alt="" />
          <div class="text">
            <span>{{ roomIdMessage.bed }}张床·宜住{{
              roomIdMessage.adult + roomIdMessage.children
            }}人</span>
            <span><span v-show="roomIdMessage.isAdd === 1">不</span>允许加客</span>
          </div>
        </div>
      </div>

      <div class="type"></div>

      <div class="facilities">
        <div class="title">
          <div class="left">价格明细</div>
        </div>
      </div>

      <div class="Rate_div">
        <span class="Rate_name">房费</span>

        <span class="Rate_number">
          每晚均价
          <span style="font-size: 20rem; color: #642e8e">
            Pi {{ roomIdMessage.price }}
          </span>
        </span>
      </div>
    </div>

    <div class="bottom_bar">
      <div class="left">
        <div class="price">
          Pi <span>{{ (roomIdMessage.price * liveDays).toFixed(2) }}</span>
        </div>
      </div>

      <div class="right">
        <div class="booking" @click="toHotelOrder">Booking</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.room_message {
  height: 80rem;
  border-bottom: 1rem solid rgba(102, 102, 102, 0.35);
  margin-bottom: 10rem;
  padding-left: 20rem;

  >.room_message_li {
    //border: 1rem solid #000;
    line-height: 20rem;
    list-style: none;
    display: inline-block;
    text-align: center;
    padding: 0 10rem;

    >.room_message_type {
      display: block;
      //border: 1rem solid #000;
      color: #9e9e9e;
    }

    >.room_message_type_text {
      display: block;
      //border: 1rem solid #000;
      height: 40rem;
      line-height: 50rem;
      font-size: 20rem;
    }
  }
}

.Rate_div {
  height: 80rem;
  //border: 1rem solid #000;
  margin: 0 auto;
  border-radius: 10rem;
  background-color: #f5f5f5;

  >.Rate_name,
  .Rate_number {
    width: 60rem;
    height: 80rem;
    //border: 1rem solid #000;
    display: inline-block;
    line-height: 80rem;
    text-align: center;
    font-size: 17rem;
    font-weight: 600;
  }

  >.Rate_number {
    padding-right: 20rem;
    width: auto;
    float: right;
    font-size: 14rem;
    color: rgba(102, 102, 102, 0.66);
  }
}

.hotelDetail {
  max-height: 100vh;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  >.backBtn {
    width: 24rem;
    height: 24rem;

    position: fixed;
    left: 16rem;
    top: 16rem;
    z-index: 100;
  }

  >.swiper {
    position: fixed;
    left: 0;
    right: 0;

    >.my-swiper {
      position: relative;

      img {
        width: 100%;
      }

      .custom-indicator {
        position: absolute;
        left: 0rem;
        right: 0rem;
        bottom: 40rem;
        margin: auto;

        font-size: 12rem;
        line-height: 18rem;
        text-align: center;
        color: #fff;

        width: max-content;
        background: #828282;
        padding: 2rem 8rem;
        border-radius: 10rem;
      }
    }
  }

  >.details {
    margin-top: 290rem;
    position: relative;
    z-index: 10;

    padding: 16rem 16rem 100rem;
    background: #fff;

    border-radius: 20rem 20rem 0 0;

    >.title {
      font-size: 18rem;
      font-weight: 600;
      line-height: 25rem;
      color: #000;

      margin-bottom: 10rem;
    }

    >.tags {
      display: flex;

      >.item {
        font-size: 12rem;
        line-height: 15rem;
        font-weight: 400;
        letter-spacing: 0rem;
        color: #808080;
        padding: 2rem 8rem;
        border: 1rem solid #bfbfbf;
        margin-right: 8rem;
        margin-bottom: 12rem;
      }
    }

    >.tips {
      padding: 12rem 18rem;
      margin-bottom: 12rem;
      display: flex;
      background: #f5f5f5;
      border-radius: 8rem;

      >.item {
        flex: 1;

        display: flex;
        align-items: center;

        >img {
          width: 44rem;
          margin-right: 8rem;
        }

        >.text {
          display: flex;
          flex-direction: column;
        }
      }
    }

    >.map {
      position: relative;
      padding: 12rem;

      border-radius: 8rem;
      margin-bottom: 12rem;

      >img {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: auto;
      }

      >.title {
        position: relative;
        z-index: 10;

        display: flex;
        align-items: center;

        font-size: 14rem;
        font-weight: 600;
        letter-spacing: 0rem;
        line-height: 19.6rem;
        color: rgba(38, 38, 38, 1);

        >.logo {
          width: 24rem;
          margin-right: 4rem;
        }
      }

      >.sub {
        position: relative;
        z-index: 10;

        margin-top: 4rem;

        font-size: 12rem;
        font-weight: 400;
        line-height: 17rem;
        color: #808080;
      }

      >.btn {
        position: absolute;
        top: 18rem;
        right: 0;

        display: flex;
        align-items: center;

        >.left {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 4rem;

          >.logo {
            width: 28rem;
            margin-bottom: 2rem;
          }
        }

        >.arrow {
          width: 16rem;
        }
      }
    }

    >.time {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 12rem;
      background: #ffe3e3;
      border-radius: 8rem;
      margin-bottom: 8rem;

      >.left {
        display: flex;
        align-items: center;

        font-size: 12rem;
        font-weight: 400;
        line-height: 16rem;
        color: #808080;

        >div {
          margin-right: 12rem;
        }

        >.date {
          font-size: 18rem;
          font-weight: 600;
          line-height: 25rem;
          color: #262626;
          margin-right: 7rem;

          >span {
            font-size: 12rem;
          }
        }
      }

      >.right {
        font-size: 12rem;
        font-weight: 400;
        line-height: 16rem;
        color: #262626;

        display: flex;
        align-items: center;

        >.btn {
          width: 16rem;
          height: 16rem;
          border-radius: 4rem;
          background: #cccccc;
          margin-left: 4rem;
        }
      }
    }

    >.facilities {
      margin-bottom: 10rem;

      >.title {
        margin-bottom: 6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >.left {
          font-size: 18rem;
          font-weight: 600;
          line-height: 26rem;
          color: #262626;
        }

        >.right {
          display: flex;

          font-size: 12rem;
          font-weight: 400;
          line-height: 16rem;
          color: #808080;

          >.btn {
            width: 16rem;
            height: 16rem;
            border: 4rem;
            background: #cccccc;
            margin-left: 4rem;
            border-radius: 4rem;
          }
        }
      }

      >.content {
        border: 1rem solid #e6e6e6;
        border-radius: 8rem;
        padding: 14rem 12rem 2rem;

        >.item {
          display: flex;
          align-items: center;
          margin-bottom: 10rem;

          >.title {
            font-size: 14rem;
            font-weight: 400;
            line-height: 20rem;
            color: #262626;
            margin-right: 10rem;
            width: 70rem;
          }

          >.ul {
            display: flex;
            justify-content: space-between;
            flex: 1;

            >.li {
              display: flex;
              align-items: center;
              flex: 1;

              >img {
                width: 16rem;
                margin-right: 4rem;
              }
            }
          }
        }
      }
    }

    >.type {
      margin-top: 16rem;

      >.item {
        display: flex;
        position: relative;

        padding: 12rem 12rem 18rem;
        margin-bottom: 8rem;
        box-shadow: 0rem 5rem 10rem -5rem rgba(214, 214, 214, 0.5);
        border-radius: 12rem;

        >img {
          width: 102rem;
          margin-right: 16rem;
        }

        >.info {
          flex: 1;
          font-weight: 400;
          font-size: 14rem;
          line-height: 20rem;
          color: #999;

          >.title {
            position: relative;
            margin-bottom: 28rem;

            font-size: 20rem;
            line-height: 28rem;
            color: #333;

            >.discount {
              position: absolute;
              top: 0;
              right: 0;
              width: 80rem;
              height: 32rem;

              >img {
                width: 100%;
              }

              >.text {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                width: max-content;
                height: max-content;
                margin: auto;

                font-size: 14rem;
                line-height: 20rem;
                color: #642e8e;
              }
            }
          }

          >.text {
            margin-bottom: 12rem;
          }
        }

        >.price {
          position: absolute;

          right: 12rem;
          bottom: 12rem;

          font-size: 20rem;
          font-weight: 500;
          line-height: 28rem;
          color: #642e8e;

          >span {
            font-size: 14rem;
            color: #999;
          }
        }
      }
    }

    >.detailImg {
      >.title {
        padding: 16rem 0;
        font-size: 18rem;
        font-weight: 600;
        line-height: 25rem;
      }

      >img {
        width: 100%;
      }
    }
  }

  >.bottom_bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;

    padding: 14rem 18rem 14rem 16rem;
    background: #f5f6f7;

    display: flex;
    justify-content: space-between;

    >div {
      align-items: center;
      display: flex;
    }

    >.left {
      >.price {
        font-size: 14rem;
        font-weight: 600;
        line-height: 28rem;
        color: #642e8e;

        margin-right: 14rem;

        >span {
          font-size: 20rem;
          margin-left: 5rem;
        }

        >strong {
          color: #262626;
        }
      }
    }

    >.right {
      flex: 1;
      margin-left: 45rem;

      >.booking {
        font-size: 14rem;
        font-weight: 500;
        line-height: 20rem;
        color: #fff;

        text-align: center;
        width: 100%;

        padding: 9rem 0rem;
        border-radius: 20rem;
        background: #642e8e;
      }
    }
  }
}
</style>
